<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 异烟酸生产收率预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/unified-login.css">
</head>
<body>
    <div class="login-container">
        <!-- 背景动画 -->
        <div class="login-bg">
            <div class="bg-gradient"></div>
            <div class="bg-pattern"></div>
            <div class="bg-animation"></div>
        </div>

        <!-- 登录内容区 -->
        <div class="login-content">
            <!-- 左侧系统介绍 -->
            <div class="system-intro">
                <div class="logo-area">
                    <img src="img/logo-icon.svg" alt="异烟酸生产收率预测系统Logo">
                    <h1>异烟酸生产收率预测系统</h1>
                </div>
                <div class="intro-text">
                    <p class="intro-headline">基于机器学习的智能工业生产优化平台</p>
                    <p class="intro-description">
                        通过深度学习和数据挖掘技术，分析异烟酸生产过程中的多维参数数据，
                        构建高精度预测模型，实现对异烟酸最终收率的精确预测，
                        为生产工艺优化和智能制造转型提供数据驱动支持。
                    </p>
                </div>
                <div class="system-features">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="feature-text">
                            <h3>实时收率预测</h3>
                            <p>准确率达93.8%的收率预测模型</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-sliders-h"></i>
                        </div>
                        <div class="feature-text">
                            <h3>参数优化</h3>
                            <p>智能推荐最优工艺参数组合</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                        <div class="feature-text">
                            <h3>异常预警</h3>
                            <p>提前发现潜在问题并预警</p>
                        </div>
                    </div>
                </div>
                <div class="system-stats">
                    <div class="stat-item">
                        <div class="stat-value">5.2%</div>
                        <div class="stat-label">收率提升</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">420万</div>
                        <div class="stat-label">年度节约</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">42%</div>
                        <div class="stat-label">不良率降低</div>
                    </div>
                </div>
            </div>

            <!-- 右侧登录框 -->
            <div class="login-form-container">
                <div class="login-form-wrapper">
                    <div class="form-header">
                        <h2>系统登录</h2>
                        <p>欢迎回来，请登录您的账号</p>
                    </div>
                    <div class="login-form">
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <div class="input-group">
                                <i class="fas fa-user"></i>
                                <input type="text" id="username" placeholder="请输入用户名" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <div class="input-group">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="password" placeholder="请输入密码">
                                <i class="fas fa-eye-slash toggle-password"></i>
                            </div>
                        </div>
                        <div class="form-options">
                            <div class="remember-me">
                                <input type="checkbox" id="remember">
                                <label for="remember">记住我</label>
                            </div>
                            <a href="#" class="forgot-password">忘记密码?</a>
                        </div>
                        <button class="login-btn">
                            <span>登录</span>
                            <i class="fas fa-arrow-right"></i>
                        </button>
                        <div class="divider">
                            <span>或</span>
                        </div>
                        <div class="alt-login-options">
                            <button class="alt-login ldap">
                                <i class="fas fa-building"></i>
                                <span>企业域账号登录</span>
                            </button>
                            <button class="alt-login face-id">
                                <i class="fas fa-user-shield"></i>
                                <span>生物识别登录</span>
                            </button>
                        </div>
                        <div class="register-link">
                            <span>还没有账号?</span>
                            <a href="#">申请注册</a>
                        </div>
                    </div>
                </div>
                <div class="form-footer">
                    <p>© 2023 异烟酸生产收率预测系统 - 版本 2.1.0</p>
                    <div class="footer-links">
                        <a href="#">隐私政策</a>
                        <a href="#">使用条款</a>
                        <a href="#">帮助中心</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 密码可见性切换
            const togglePassword = document.querySelector('.toggle-password');
            const passwordInput = document.querySelector('#password');
            
            if (togglePassword && passwordInput) {
                togglePassword.addEventListener('click', function() {
                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    passwordInput.setAttribute('type', type);
                    this.classList.toggle('fa-eye');
                    this.classList.toggle('fa-eye-slash');
                });
            }
            
            // 登录按钮点击事件
            const loginBtn = document.querySelector('.login-btn');
            if (loginBtn) {
                loginBtn.addEventListener('click', function() {
                    const username = document.querySelector('#username').value;
                    const password = document.querySelector('#password').value;
                    
                    // 这里只是演示，实际应该进行表单验证
                    if (username && password) {
                        // 添加加载动画
                        this.classList.add('loading');
                        
                        // 模拟登录请求
                        setTimeout(() => {
                            window.location.href = 'index.html';
                        }, 1500);
                    } else {
                        alert('请输入用户名和密码');
                    }
                });
            }
            
            // 动态背景效果
            const bgAnimation = document.querySelector('.bg-animation');
            if (bgAnimation) {
                for (let i = 0; i < 10; i++) {
                    const particle = document.createElement('div');
                    particle.classList.add('particle');
                    
                    // 随机位置、大小和动画延迟
                    const size = Math.random() * 80 + 20;
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;
                    particle.style.left = `${Math.random() * 100}%`;
                    particle.style.top = `${Math.random() * 100}%`;
                    particle.style.animationDelay = `${Math.random() * 10}s`;
                    
                    bgAnimation.appendChild(particle);
                }
            }
        });
    </script>
</body>
</html> 